<template>
	<view style="height: 100%;" class="bg-white">
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">裁剪图片</block>
		</cu-custom>
		<tui-picture-cropper
			custom
			:maxScale="maxScale"
			:quality="1.0"
			:height="height"
			:width="width"
			:lockRatio="lockRatio"
			:startCutting="startCutting"
			:lockWidth="lockWidth"
			:lockHeight="lockHeight"
			:imageUrl="imageUrl"
			:limitMove="true"
			@cropper="cropper"
		>
		</tui-picture-cropper>
		<view class="tui-custom-bar flex justify-center align-center">
			<button @tap="btnCropper" style="width: 70%;" :class="'cu-btn round '+themeColor">确认裁剪</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				themeColor:this.ThemeColor,
				width:280,
				height:280,
				scaleRatio:2,
				maxScale:4,
				lockRatio: true, //锁定比例
				edgeColor: '#fff', //边缘线颜色
				rotateAngle: 0,
				startCutting: 0, //开始裁剪
				lockWidth: false, //裁剪框宽度锁定
				lockHeight: false, //裁剪框高度锁定
				imageUrl:null
			}
		},
		onLoad(options) {
			if(options.url !== null && options.url !== undefined) 
			{
				this.imageUrl = options.url
			}
			if(options.isAvatar !== null && options.isAvatar !== undefined) 
			{
				this.width = 120
				this.height = 120
			}
			if(options.isIcon !== null && options.isIcon !== undefined)
			{
				this.width = 150
				this.height = 150
			}
			if(options.isBackground !== null && options.isBackground !== undefined) 
			{
				this.height = this.width*0.8
			}
			if(options.isActivity !== null && options.isActivity !== undefined) {
				this.height = this.width*0.6
				this.maxScale = 6
				if(options.isForumActivity !== null && options.isForumActivity !== undefined) {
					this.height = this.width*0.3
					this.maxScale = 4
				}
			}
		},
		methods: {
			btnCropper() {
				this.startCutting += 1;
			},
			cropper(e) {
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('imageCropperFinish', {url: e.url});
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style scoped>
.tui-custom-bar {
	width: 100%;
	padding: 0 20rpx 20rpx;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 9999;
}

.tui-item-box {
	width: 100%;
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 28rpx;
	justify-content: space-between;
	white-space: nowrap;
	padding-bottom: 12rpx;
}

.tui-flex-start {
	justify-content: flex-start !important;
}

.tui-switch {
	transform: scale(0.8);
	transform-origin: 0 center;
}

.tui-back {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 50rpx;
	display: flex;
	align-items: center;
	/* #ifndef MP */
	justify-content: space-between;
	/* #endif */
}
.tui-btn-box {
	margin-left: 60rpx;
}
</style>
